<template>
	<view class="bottom">
		<view class="view1" :class="{'nav-tab-active':home===0}" @click="toIndex(0)">
			<image :src="home===0?'/static/tabbar/home_art.png':'/static/tabbar/home.png'"></image>
			<view>首页</view>
		</view>
		<view class="view1" :class="{'nav-tab-active':home===1}" @click="toIndex(1)">
			<image :src="home===1?'/static/tabbar/center_art.png':'/static/tabbar/center.png'"></image>
			<view>分类</view>
		</view>
		<view class="xm_tg view1" :class="{'nav-tab-active':home===4}">
			<view v-if="vuex_writeShow&&!vuex_isShenHe" @click="toIndex(4)">
				  <view class="foot_btn" ><image src="/static/tabbar/tougao.png" class="icontg"></image></view>
			</view>
			<view v-if="!vuex_writeShow||vuex_isShenHe">
				<view class="foot_btn"><image src="/static/tabbar/tougao_art.png" class="icontg" ></image></view>
			</view>
		</view>
		<view class="view1" :class="{'nav-tab-active':home===2}" @click="toIndex(2)">
			<image :src="home===2?'/static/tabbar/find_art.png':'/static/tabbar/find.png'"></image>
			<view>榜单</view>
		</view>
		<view class="view1" :class="{'nav-tab-active':home===3}" @click="toIndex(3)">
		   <image :src="home===3?'/static/tabbar/user_art.png':'/static/tabbar/user.png'"></image>
			<view>我的</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				
			}
		},
		props: ['home'],
		methods: {
			toIndex(index) {
				this.$emit('toIndex', index)
			}
		}
	}
</script>

<style scoped lang="scss">
.bottom {
	border-top:1px solid #eee;
	padding:8px 0;
	background:#fff;
	position:fixed;
	bottom:0;
	width:100%;
	height:70px;
	z-index:999
}
.bottom image{
	width: 50rpx;
	height: 50rpx;
}
.bottom .view1 {
	width:20%;
	text-align:center;
	float:left
}
.bottom view view {
	display:block;
	font-size:28px;
	line-height:26px
}
.bottom view view {
	overflow:hidden;
	font-size:12px;
	height:16px;
	line-height:16px;
	color:#888
}
.bottom .foot_btn {
	width:48px;
	padding:5px 0;
	text-align:center;
	height:24px;
	line-height:24px;
	font-size:24px;
	margin:0 auto 0;
	border-radius:2px
}
.bottom .xm_tg view view.foot_btn {
    width: 60px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
	padding:0;
	background-color: #ffdf00;
}
.bottom .icontg {
	padding-top:8px
}
.bottom .xm_tg view span {
    display: block;
    position: absolute;
    bottom: 0;
    left: calc(50% - 30px);
    z-index: 100;
    border-radius: 50%;
}
.bottom .xm_tg view {
	bottom:0;
	left:calc(50% - 30px);
	height:40px;
	border-radius:50%;
	overflow:visible
}

.xm_tg {
	overflow:visible;
	position:relative
}



@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
	.bottom {
	}
}
@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-device-pixel-ratio:3) {
	.bottom {
	}
}
@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-device-pixel-ratio:2) {
	.bottom {
	}
}

</style>